<template>
  <div class="advise">
    <div class="select-box">
      <div class="title">
        请选择您认为需要改进的建议
      </div>
      <div class="select-list">
        <ul class="clear">
          <li class="left">
            <div class="select-item" data-id="0" data-flag="false" @click="handleSelect($event)">缺少个性化设计</div>
          </li>
          <li class="left">
            <div class="select-item" data-id="1" data-flag="false" @click="handleSelect($event)">界面不美观</div>
          </li>
          <li class="left">
            <div class="select-item" data-id="2" data-flag="false" @click="handleSelect($event)">功能太少</div>
          </li>
          <li class="left">
            <div class="select-item" data-id="3" data-flag="false" @click="handleSelect($event)">福利不多</div>
          </li>
          <li class="left">
            <div class="select-item" data-id="4" data-flag="false" @click="handleSelect($event)">功能不吸引</div>
          </li>
          <li class="left">
            <div class="select-item" data-id="5" data-flag="false" @click="handleSelect($event)">其他</div>
          </li>
        </ul>
      </div>
    </div>
    <Submit :titleOptions="titleOptions" :selectData="dataArr"></Submit>
  </div>
</template>

<script>
  import Submit from '../common/submit.vue'
  import $ from 'jquery'

  export default {
    name: "product-advise",
    components: {
      Submit
    },
    data() {
      return {
        titleOptions: {
          inputTitle: '请告诉我们您的想法 <span style="color: #DF5449">*</span>',
          imagesTitle: '提供相关问题的截图或照片'
        },
        dataArr: [[],[]]
      }
    },
    methods: {
      handleSelect(e) {
        var flag = $(e.target).attr('data-flag'),
          id = $(e.target).attr('data-id');

        if (flag == 'true') {
          $(e.target).attr('data-flag', 'false')
          this.dataArr[0].forEach((v, i) => {
            if (v == id) {
              this.dataArr[0].splice(i, 1)
            }
          })
        } else {
          $(e.target).attr('data-flag', 'true')
          this.dataArr[0].push(id)
        }

        $(e.target).toggleClass('selected')

        console.log(this.dataArr)
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/config';

  .select-box {
    .title {
      @extend .title-style;
    }

    .select-list {
      background-color: #fff;
      ul {
        width: 100%;
        padding: r(7.5) 0;
        li {
          width: 50%;
          padding: r(7.5) 0;
          .select-item {
            width: r(136);
            height: r(30);
            line-height: r(30);
            margin: 0 auto;
            font-size: r(15);
            color: #fff;
            background: #D5D5D5;
            border-radius: r(30);
            text-align: center;
            padding: 0 r(10);
            @extend .ellipsis;
            &.selected {
              background-color: #FED953;
            }
          }
        }
      }
    }
  }
</style>
